<template>
    <div class="content">
        <el-row>
            <el-col :span="24">
                <div class="table-title">
                    <span>基础表格</span>
                    <el-tooltip placement="bottom-start" effect="light">
                        <template #content>
                            <div class="tooltip">
                                <h3>表格封装</h3>
                                <span>在element 表格的基础上进行封装</span>
                                <span>添加修改 使用封装过后的baseForms 具体使用查看文件 components/baseForms/README.md</span>
                            </div>
                        </template>
                        <el-icon><Warning /></el-icon>
                    </el-tooltip>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="23">
                <div class="table-form">
                    <el-form :model="form" :inline="true">
                        <el-form-item label="名称">
                            <el-input v-model="form.name" placeholder="请输入名称"/>
                        </el-form-item>
                        <el-form-item label="状态">
                            <el-select v-model="form.state" clearable placeholder="请选择状态">
                                <el-option
                                        v-for="item in form.stateOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"/>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="创建时间">
                            <el-date-picker
                                    v-model="form.time"
                                    type="date"
                                    value-format="YYYY-MM-DD"
                                    placeholder="请选择时间"/>
                        </el-form-item>
                        <el-form-item label="创建时间段">
                            <el-date-picker
                                    v-model="form.time1"
                                    type="daterange"
                                    value-format="YYYY-MM-DD"
                                    range-separator="至"
                                    start-placeholder="开始时间"
                                    end-placeholder="结束时间"/>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="addItem">新增</el-button>
                            <el-button type="primary" @click="search">查询</el-button>
                            <el-button type="primary" @click="getCheck">获取勾选</el-button>
                        </el-form-item>
                    </el-form>
                </div>
            </el-col>
        </el-row>
        <el-row>
            <el-col :span="24">
                <div class="table-div">
                    <baseTable
                            ref="baseTableRef"
                            :tableData="tableData"
                            :tableCol="tableCol"
                            :showTable="true"
                            :showPage="true"
                            :tableHeight="tableHeight"
                            :page="page">
                    </baseTable>
                </div>
            </el-col>
        </el-row>
        <add-popup ref="addPopupRef"></add-popup>

    </div>
</template>

<script setup>
    import { ElMessage } from 'element-plus'
    import { ref,onMounted,reactive} from 'vue'
    import baseTable from '../../components/baseTable/index.vue'
    import utils from '../../utils/utils'
    import avatar from '../../assets/img/avatar.png'

    import addPopup from './addPopup.vue'


    const form = reactive({
        name:'1111',
        state:'',
        stateOptions:[
            {value: true,label: '激活',},
            {value: false,label: '关闭',},
        ],
        time:'',
        time1:[],
    });


    const tableData = ref([]);
    const tableCol = [
        {value: '', label: '', Vif: 'true', type: 'selection'},
        {value: '', label: '序号', Vif: 'true', type: '序号'},
        {value: 'photo', label: '头像',Vif: 'true',type:'photo'},
        {value: 'name', label: '名称', Vif: 'true'},
        {value: 'gender', label: '性别', Vif: 'true',formatter:genderData},
        {value: 'phone', label: '手机号', Vif: 'true',formatter:phoneData},
        {value: 'state', label: '状态', Vif: 'true',type: 'switch',activeText:'激活',inactiveText:'关闭',click:stateClick},
        {value: 'creationTime', label: '创建时间', Vif: 'true',formatter:timeData},
        {value: 'content', label: '内容', Vif: 'true'},
        {value: '', label: '操作' ,type:'操作',width:'80',
            tButton:[
                {color:'#ff9c66',tSize:"mini",tClick:updateItem,tName:'修改'},
            ]
        },
    ];
    const tableHeight = ref();
    tableHeight.value = utils.tableHeight();
    const page = {
        // 当前页
        currentPage: 1,
        pageSize: 20,
        // 分页大于3页是折叠分页
        pagerCount: 7,
        // 总条数
        total: 0,
        // 有多少页
        pageCount: 0,
        handleSizeChange:handleSizeChange,
        handleCurrentChange:handleCurrentChange

    };
    const baseTableRef = ref();
    const addPopupRef = ref();



    // 获取数据
    const getData = ()=>{
        let list = ref([]);
        const int = 45;
        for(let i=0;i<int;i++){
            list.value.push(
                {'name':'张三','gender':'0','photo':avatar,'phone':'18888888888','state':true,'creationTime':'1702450494000','content':'asjdakjdad ad ad ad gajdg ad ajasdjkadhajdga da dak da da d '}
            )
        }
        page.total = int;
        tableData.value = list.value
    };

    // 分页
    function handleSizeChange () {};
    function handleCurrentChange() {};

    // 查询
    const search = ()=>{
        console.log(form.value)
    };


    // 表格转换
    function genderData (row,column,cellValue) {
        let content = cellValue?'男':'女';
        return content
    }
    function phoneData(row,column,cellValue) {
        const content = utils.textReplacement(cellValue,3,8,'*')
        return content
    }
    function timeData(row,column,cellValue) {
        const content = utils.forMateDate(cellValue,'YYYY-MM-dd hh:mm:ss');
        return content
    }

    // 状态操作
    function stateClick(index,row) {
        console.log(row)
    }

    // 获取勾选
    const getCheck = ()=>{
        const list = baseTableRef.value.getTableSelect();
        console.log(list)
    };

    // 新增
    const addItem =() =>{
        addPopupRef.value.initialization()
    };
    // 修改
    function updateItem(index,row) {
        addPopupRef.value.initialization(row)
    }

    //
    onMounted(() => {
        getData();
        window.onresize = () => {
            tableHeight.value = utils.tableHeight();
        };
    })



</script>

<style lang="scss" scoped>


</style>